<template>
  <div class="welcome-wrap">
    <div class="module-wrap">
      <div class="module-left">
        <img src="~@/assets/logo.png" alt="" />
        <p style="color: #fff; font-size: 16px; margin-top: 20px">欢迎来到</p>
        <p style="color: #29abe2; font-size: 22px">贵阳市住房保障系统一体化管理平台</p>
        <p style="color: #fff; font-size: 16px">点击右边菜单进入</p>
      </div>
      <div class="module-right">
        <div class="module-list">
          <a @click="getInto(1)">
            <!-- <router-link to="/login"> -->
            <div class="module-item access">
              <img src="~@/assets/images/zr.png" alt="贵阳准入系统" />
              <p>贵阳准入系统</p>
            </div>
            <!-- </router-link> -->
          </a>

          <!-- <a href="http://222.85.201.115:8027/"> -->
          <router-link to="" tag="a" href="javascript:;">
            <div class="module-item secure-house">
              <img src="~@/assets/images/ajf.png" alt="安居房管理系统" />
              <p>安居房管理系统</p>
            </div>
          </router-link>
        </div>
        <div class="module-list">
          <a @click="getInto(2)">
            <!-- <router-link to="/login"> -->
            <div class="module-item follow-up">
              <img src="~@/assets/images/hxgl.png" alt="后续管理系统" />
              <p>后续管理系统</p>
            </div>
          </a>
          <a href="http://222.85.201.115:8029">
            <div class="module-item guaranteed-rent">
              <img src="~@/assets/images/bzf.png" alt="保租房管理系统" />
              <p>保租房管理系统</p>
            </div>
          </a>
        </div>
        <!-- <router-link to="/login" tag="a" href="javascript:;"> -->
        <a @click="getInto(3)">
          <div class="module-list self-filing">
            <img src="~@/assets/images/zxba.png" alt="自行备案系统" />
            <p>自行备案系统</p>
          </div>
        </a>
      </div>
    </div>
    <div class="foot-wrap">
      <span>制作单位：贵阳佳智软件开发有限公司</span>
      <span>技术服务热线：0851-85865358</span>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    getInto(into) {
      this.$store.commit('getintoIdChange', into)
      localStorage.setItem('into', into)
      this.$router.push('/login')
    },
  },
}
</script>

<style lang="less" scoped>
.welcome-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // min-width: max-content;
  background: url(~@/assets/images/welcome.jpg) no-repeat;
  background-position: center;
  background-size: 100% 100%;
  .module-wrap {
    // width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .module-left {
      // width: 500px;
      margin-right: 120px;
    }
    .module-right {
      display: flex;
      .module-list {
        color: #fff;
        margin-right: 12px;
        a {
          color: #fff;
        }
        .module-item {
          width: 225px;
          height: 225px;
          border-radius: 8px;
          text-align: center;
          margin-bottom: 10px;
          padding: 40px;
          img {
            max-width: 120px;
            height: 100px;
            vertical-align: middle;
          }
          p {
            margin-top: 20px;
          }
        }
        .access {
          background-color: rgba(2, 141, 198, 0.8);
        }
        .follow-up {
          background-color: rgba(2, 147, 143, 0.8);
        }
        .secure-house {
          background-color: rgba(2, 131, 65, 0.8);
        }
        .guaranteed-rent {
          background-color: rgba(119, 171, 65, 0.8);
        }
      }
      .self-filing {
        width: 235px;
        height: 460px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: rgba(21, 38, 121, 0.8);
        border-radius: 8px;
        text-align: center;
        p {
          margin-top: 30px;
        }
      }
    }
  }
  .foot-wrap {
    color: #fff;
    text-align: center;
    font-size: 14px;
    position: relative;
    bottom: -160px;
    & > span:nth-child(2) {
      margin-left: 60px;
    }
  }
}
</style>
